<template>
	<div id="ezui-video" class="ezui-video w-full h-full">
		<!-- <div class="empty" v-if="!videoUrl || videoError">{{ videoError || "设备暂无视频" }}</div>
		<div id="video-panel" class="video-panel"></div> -->
	</div>
</template>

<script setup lang="ts" name="videoBox">
// import { getProfile } from "@/api/modules/model/profile";
// import poster from "@public/images/decoration/video.png";
// import axios from "axios";
// const ezuiToken = ref("");
// const videoUrl = ref("");
// import EZUIKit from "ezuikit-js";

// const props = defineProps({
// 	sn: {
// 		type: String,
// 		default: ""
// 	}
// });
// let player;
// const devSn = computed(() => props.sn);
// onMounted(async () => {
// 	//     player.stop()
// 	// .then(()=>{
// 	//   player.play('ezopen://open.ys7.com/{其他设备}/{其他通道}.live');
// 	// });
// 	// player.play();
// 	// player.play({
// 	//   url: "ezopen://open.ys7.com/FK9068860/1.hd.live"
// 	// });
// });
// watch(
// 	() => devSn.value,
// 	async () => {
// 		await player?.stop?.();
// 		await startPlayer();
// 	},
// 	{ immediate: true }
// );
// const startPlayer = async () => {
// 	if (!devSn.value) {
// 		return;
// 	}
// 	const res = await getProfile({
// 		idSn: devSn.value
// 		// path: `config.subdevice.${route.query.sn}`
// 	});
// 	await getVideoUrl({ devId: res.result?.profile?.config?.devId });
// 	if (!videoUrl.value) {
// 		return;
// 	}

// 	if (!player) {
// 		player = new EZUIKit.EZUIKitPlayer({
// 			id: "video-panel",
// 			autoplay: false,
// 			audio: 0,
// 			url: videoUrl.value || "",
// 			accessToken: ezuiToken.value,
// 			decoderPath: poster,
// 			// template: "standard",
// 			template: "pcLive",
// 			width: "100%",
// 			height: "100%",
// 			handleError: err => {
// 				console.log(err);
// 			},
// 			handleSuccess: ok => {
// 				console.log(ok);
// 			}
// 			// themeData: null
// 		});
// 	}
// 	player.play({
// 		url: videoUrl.value
// 	});
// };
// const setToken = async () => {
// 	if (!ezuiToken.value) {
// 		let res = await _fetchEzuiApi({ fn: "getToken" });
// 		ezuiToken.value = res.data.accessToken;
// 	}
// };
// const videoError = ref("");
// const getVideoUrl = async (param: { devId: string }) => {
// 	videoError.value = "";
// 	videoUrl.value = "";
// 	await setToken();
// 	let res = await _fetchEzuiApi({ fn: "getVideo", param });
// 	videoUrl.value = res.data?.url;
// 	videoError.value = res.msg;
// };
// const _fetchEzuiApi = async ({ fn, param }: { fn: "getVideo" | "getToken"; param?: any }) => {
// 	let headers = { "Content-Type": "application/x-www-form-urlencoded" };
// 	let data = {};
// 	let api = "";
// 	switch (fn) {
// 		case "getVideo": {
// 			if (!param?.devId) {
// 				return { msg: "请先配置视频设备信息" };
// 			}
// 			api = "https://open.ys7.com/api/lapp/v2/live/address/get";
// 			data = {
// 				accessToken: ezuiToken.value,
// 				protocol: "1",
// 				// deviceSerial: "FK9068860",
// 				deviceSerial: param?.devId,
// 				...param
// 			};
// 			headers["Authorization"] = `Bearer ${ezuiToken.value}`;
// 			break;
// 		}
// 		case "getToken": {
// 			api = "https://open.ys7.com/api/lapp/token/get";
// 			data = {
// 				appKey: "c07435cdfc5b4363b971c444b631d296",
// 				appSecret: "94b59f2d15dc6b6fd0d6326dfa1218fe"
// 			};
// 		}
// 	}

// 	let res = await axios.post(api, data, { headers: { ...headers } });
// 	return res.data;
// };
// /* eslint-disable  */
// let themeData = {
// 	autoFocus: 5,
// 	poster: "https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
// 	header: {
// 		color: "#1890ff",
// 		activeColor: "#FFFFFF",
// 		backgroundColor: "#000000",
// 		btnList: [
// 			{
// 				iconId: "deviceID",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "顶部设备名称",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "deviceName",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "顶部设备ID",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "cloudRec",
// 				part: "right",
// 				defaultActive: 0,
// 				memo: "头部云存储回放",
// 				isrender: 0
// 			},
// 			{
// 				iconId: "rec",
// 				part: "right",
// 				defaultActive: 0,
// 				memo: "头部本地回放",
// 				isrender: 0
// 			}
// 		]
// 	},
// 	footer: {
// 		color: "#FFFFFF",
// 		activeColor: "#1890FF",
// 		backgroundColor: "#00000021",
// 		btnList: [
// 			{
// 				iconId: "play",
// 				part: "left",
// 				defaultActive: 1,
// 				memo: "播放",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "capturePicture",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "截屏按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "sound",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "声音按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "pantile",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "云台控制按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "recordvideo",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "录制按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "talk",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "对讲按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "zoom",
// 				part: "left",
// 				defaultActive: 0,
// 				memo: "电子放大",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "hd",
// 				part: "right",
// 				defaultActive: 0,
// 				memo: "清晰度切换按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "webExpend",
// 				part: "right",
// 				defaultActive: 0,
// 				memo: "网页全屏按钮",
// 				isrender: 1
// 			},
// 			{
// 				iconId: "expend",
// 				part: "right",
// 				defaultActive: 0,
// 				memo: "全局全屏按钮",
// 				isrender: 1
// 			}
// 		]
// 	}
// };
</script>

<style lang="scss">
.ezui-video {
	position: relative;
	background-color: #000000;
	.empty {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 9;
		font-size: 14px;
		color: #cccccc;
		text-align: center;
		transform: translate(-50%, -50%);
	}
	.video-panel {
		width: 100%;
		height: 100%;
	}
	#video-panel-wrap,
	#video-panel {
		width: 100% !important;
		height: 100% !important;
	}
}
</style>
